<template>
  <div class="app-container">
    <p class="title">数据总览</p>
    <!-- 顶部的三个数据 -->
    <div class="top">
      <!-- 咨询人数 -->
      <div class="information">
        <p style="margin-left:23px;font-size:15px">接单数量</p>
        <span style="font-size:30px;">{{ total }}<span style="font-size:12px;">今日</span></span>
        <p class="total">共{{ totalVisit }}</p>
      </div>
      <!-- 访问人数 -->
      <div class="visit">
        <p style="margin-left:23px;font-size:15px">获取金额</p>
        <span style="font-size:30px;">{{ visit }}<span style="font-size:12px;">今日</span></span>
        <p class="total">共{{ totalVisit }}</p>
      </div>
      <!-- 咨询时长 -->
      <div class="duration">
        <p style="margin-left:85px;font-size:15px;width:130px">工作时长（小时）</p>
        <span style="font-size:30px;">{{ duration }}<span style="font-size:12px;">今日</span></span>
        <p class="total" style="margin-left:19px;">共{{ totalDuration }}小时</p>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// 头部数据总览的数据
const total = ref('');
const totalDuration = ref('');
const totalVisit = ref('');
const duration = ref('');
const visit = ref('');


</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 30px;
  width: 70px;
}

// 顶部三个数据
.top {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 50px;

  .information,
  .visit,
  .duration {
    width: 232px;
    height: 140px;
    border: 2px solid #dfe6e9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    font-size: 16px;
    margin-right: 35px;
    border-radius: 4px;

    p {
      margin-right: 145px;
    }

    .total {
      font-size: 12px;
    }
  }
}

// 中间的两个图形
.middle {
  display: flex;

  // 头部的标题和时间选择器
  header {
    display: flex;
    align-items: baseline;

    .demo-date-picker {
      display: flex;
      width: 350px;
      padding: 0;
      margin-left: 247px;
      flex-wrap: wrap;

      .block {
        text-align: left !important;
      }
    }

    .demo-date-picker .block {
      padding: 30px 0;
      text-align: center;
      border-right: solid 1px var(--el-border-color);
      flex: 1;
    }

    .demo-date-picker .block:last-child {
      border-right: none;
    }

    .demo-date-picker .demonstration {
      display: block;
      color: var(--el-text-color-secondary);
      font-size: 14px;
      margin-bottom: 20px;
    }
  }

  .charts-container {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }

  .left,
  .right {
    width: 50%;
  }

  .right-pie {
    display: flex;
  }
}

// 底部的图表
.bottom {
  margin-top: 20px;
}
</style>
